<template>
  <m-box
    title="采购分析"
    size="small"
    class="purchase-analysis"
    :class="{ isFullScreen: fsStore.isFullScreen }"
  >
    <m-row :gutter="20">
      <m-col :span="12">
        <div class="d-box">
          <dv-border-box-12 class="d-title">本年</dv-border-box-12>
          <div class="d-content">
            <decoration :value="yearRate" title="采购及时率" />
            <decoration :value="qualifiedYearRate" title="采购合格率" />
          </div>
        </div>
      </m-col>
      <m-col :span="12">
        <div class="d-box">
          <dv-border-box-12 class="d-title">本月</dv-border-box-12>
          <div class="d-content">
            <decoration :value="monthRate" title="采购及时率" />
            <decoration :value="timelyMonthRate" title="采购合格率" />
          </div>
        </div>
      </m-col>
    </m-row>
  </m-box>
</template>
<script setup>
import http from '@/utils/request'
import { onMounted } from 'vue'
import decoration from './widget/decoration/index.vue'
import { useFullScreenStore } from '@/stores/fullScreen'
const fsStore = useFullScreenStore()

const yearRate = ref(0) // 本年：采购及时率
const qualifiedYearRate = ref(0) // 本年：采购合格率
const monthRate = ref(0) // 本月：采购及时率
const timelyMonthRate = ref(0) // 本月：采购合格率

function caculate(v) {
  return Math.round(v * 100) / 100
}
const getData = async () => {
  try {
    const res = await http.get('/v1/kanban/geteProcurementAnalysisReport')
    yearRate.value = caculate(res.yearRate)
    qualifiedYearRate.value = caculate(res.qualifiedYearRate)
    monthRate.value = caculate(res.monthRate)
    timelyMonthRate.value = caculate(res.timelyMonthRate)
  } catch (e) {
    console.error(e)
  }
}

function init() {
  getData()
}
onMounted(() => {
  init()
})
// 暴露方法
defineExpose({
  init
})
</script>
<style lang="less" scoped>
.purchase-analysis {
  .m-box__body {
    overflow: auto;
    > div {
      .border-box-content {
        overflow: hidden;
        > .m-row {
          height: 100%;
          margin-bottom: 0;
          > .m-col:nth-child(1)::after {
            content: '';
            display: block;
            height: 55%;
            border-right: 3px dotted rgba(21, 105, 138, 0.2);
            position: absolute;
            top: 55%;
            right: 0%;
            transform: translateY(-50%);
          }
          .m-col {
            position: relative;
            height: 100%;
            &:nth-child(1) {
              padding-left: 0 !important;
              padding-right: 5 !important;
            }
            &:nth-child(2) {
              padding-left: 5px !important;
              padding-right: 0 !important;
            }
            > .d-box {
              height: 100%;
              overflow: hidden;
              display: flex;
              flex-direction: column;
              ::v-deep(.d-title) {
                width: 80px;
                height: 25px;
                line-height: 25px;
                // padding-bottom: 5px;
                text-align: center;
                .border-box-content {
                  line-height: 25px;
                  font-size: 12px;
                }
              }
              .d-content {
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: space-around;
              }
            }
          }
        }
      }
    }
  }
}
</style>
